Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,
将调用ajaxStart()方法。
同样,ajaxStop()方法则是在所有Ajax请求都完成时调用。
这些方法的参数都是一个函数,
这个函数将在事件发生时被调用。
jquery1.9+版本以后,ajax全局事件需绑定到document对象上才能触发。

<link rel="stylesheet" href="./nprogress.css">
<style>
.loading{
    display:none;
    position:fixed;
    background: rgba(0,0,0,.3);
    text-align:center;
    top:0;
    bottom:0;
    left:0;
    right:0;
    color:#fff;
    font-size: 60px;
};
</style>

</head>
<body>

<div class="loading">正在玩命加载中...</div>
<button id="btn">请求</button>

<script src="./jquery.js"></script>
<script src="./nprogress.js"></script>
<script>
$(document)
.ajaxStart(function(){
    //只要有ajx请求发生 就会执行
    $('.loading').fadeIn()
        NProgress.start();
    // 显示加载提示
    console.log('注意即将开始请求了')
})
.ajaxStop(function(){
    $('.loading').fadeOut()
     NProgress.done();
    // 结束提示
    console.log("请求结束了")
})
$('#btn').on('click',function(){
    $.get('time.php')
})

</script>

HappyCodingTop
526 声望847 粉丝

Talk is cheap, show the code!!


« 上一篇
ES6之Reflect